import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';

class SceneApplicaCenterPage extends StatefulWidget {
  const SceneApplicaCenterPage({super.key});

  @override
  State<SceneApplicaCenterPage> createState() => _SceneApplicationCenterState();
}

class _SceneApplicationCenterState extends State<SceneApplicaCenterPage> {
  String _activeSection = 'home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Breadcrumb(
                text: "首页 > 服务平台 > 场景应用中心",
              ),
              // 主体内容
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 左侧导航
                  _buildSidebar(),
                  // 右侧内容区
                  _buildMainContent(),
                ],
              ),
              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 30),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 20,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            '创新服务平台',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth < 600) {
                return const SizedBox();
              }
              return Row(
                children: [
                  _buildNavItem('首页'),
                  _buildNavItem('智算中心'),
                  _buildNavItem('知识中枢'),
                  _buildNavItem('场景应用中心'),
                  _buildNavItem('联系我们'),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildNavItem(String title) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 16,
        ),
      ),
    );
  }

  Widget _buildBreadcrumb() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15),
      child: Text(
        '首页 > 服务平台 > 场景应用中心',
        style: TextStyle(
          color: Colors.grey[600],
          fontSize: 14,
        ),
      ),
    );
  }

  Widget _buildSidebar() {
    return Container(
      width: 250,
      margin: const EdgeInsets.only(right: 30, top: 20),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '场景应用中心',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Divider(height: 30, thickness: 2, color: Color(0xFFF0F0F0)),
          _buildSidebarItem('首页', 'home'),
          _buildSidebarItem('建设概况', 'construction'),
          _buildSidebarItem('政策资讯', 'policy'),
          _buildSidebarItem('活动报道', 'activity'),
          _buildSidebarItem('服务介绍', 'service'),
        ],
      ),
    );
  }

  Widget _buildSidebarItem(String title, String sectionId) {
    final isActive = _activeSection == sectionId;
    return Padding(
      padding: const EdgeInsets.only(bottom: 15),
      child: InkWell(
        onTap: () => setState(() => _activeSection = sectionId),
        borderRadius: BorderRadius.circular(4),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          decoration: BoxDecoration(
            color: isActive ? const Color(0xFFF0F7FF) : Colors.transparent,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Row(
            children: [
              if (isActive)
                Padding(
                  padding: EdgeInsets.only(right: 6),
                  child: SizedBox(
                    width: 4,
                    height: 16,
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        color: Color(0xFF207CCA),
                        borderRadius: BorderRadius.circular(2),
                      ),
                    ),
                  ),
                ),
              Text(
                title,
                style: TextStyle(
                  color: isActive ? const Color(0xFF1E5799) : Colors.grey[600],
                  fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildMainContent() {
    return Expanded(
      child: Container(
        margin: const EdgeInsets.only(top: 20),
        padding: const EdgeInsets.all(30),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 15,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: _getSectionContent(),
      ),
    );
  }

  Widget _getSectionContent() {
    switch (_activeSection) {
      case 'home':
        return _buildHomeSection();
      case 'construction':
        return _buildConstructionSection();
      case 'policy':
        return _buildPolicySection();
      case 'activity':
        return _buildActivitySection();
      case 'service':
        return _buildServiceSection();
      default:
        return const Center(child: Text('内容建设中'));
    }
  }

  Widget _buildHomeSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '场景应用中心',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '连接技术与场景，赋能产业数字化转型',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildPlaceholderImage(300),
        const SizedBox(height: 20),
        const Text(
          '场景应用中心是创新服务平台的核心应用展示平台，聚焦各行业数字化转型需求，提供从技术到场景的完整解决方案。中心汇聚了来自智能制造、智慧城市、数字医疗、智慧农业等领域的200多个成功案例。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '我们致力于连接前沿技术与实际应用场景，通过展示优秀案例、提供解决方案咨询、组织场景对接活动等方式，帮助企业找到最适合的技术应用路径，加速数字化转型进程。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '场景应用中心已服务超过1000家企业，促成300多项技术应用合作，成为区域数字化转型的重要支撑平台。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 30),
        const Text(
          '典型应用场景',
          style: TextStyle(
            color: Color(0xFF333333),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 20),
        _buildScenarioGrid(),
      ],
    );
  }

  Widget _buildScenarioGrid() {
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      crossAxisSpacing: 20,
      mainAxisSpacing: 20,
      childAspectRatio: 1.5,
      children: [
        _buildScenarioCard(
          '智能制造',
          '基于工业互联网的智能工厂解决方案，实现生产全流程数字化管理。',
          ['工业4.0', '数字孪生'],
        ),
        _buildScenarioCard(
          '智慧城市',
          '城市大脑平台整合多源数据，提升城市治理能力和公共服务水平。',
          ['城市治理', '数字政府'],
        ),
        _buildScenarioCard(
          '数字医疗',
          'AI辅助诊断、远程医疗和智慧医院建设，提升医疗服务效率。',
          ['智慧医院', 'AI医疗'],
        ),
        _buildScenarioCard(
          '智慧农业',
          '农业物联网和精准农业技术，实现农业生产智能化管理。',
          ['精准农业', '数字乡村'],
        ),
        _buildScenarioCard(
          '智慧交通',
          '智能交通管理系统和车路协同技术，提升交通运行效率。',
          ['智能网联', '智慧停车'],
        ),
        _buildScenarioCard(
          '智慧教育',
          '个性化学习平台和虚拟仿真教学，推动教育数字化转型。',
          ['在线教育', '虚拟实验'],
        ),
      ],
    );
  }

  Widget _buildScenarioCard(String title, String content, List<String> tags) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            content,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          Wrap(
            spacing: 5,
            children: tags
                .map((tag) => Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 8, vertical: 3),
                      decoration: BoxDecoration(
                        color: const Color(0xFFE0E9FF),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Text(
                        tag,
                        style: const TextStyle(
                          color: Color(0xFF1E5799),
                          fontSize: 12,
                        ),
                      ),
                    ))
                .toList(),
          ),
        ],
      ),
    );
  }

  Widget _buildConstructionSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '建设概况',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '场景应用中心的发展历程与建设成果',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildPlaceholderImage(300),
        const SizedBox(height: 20),
        const Text(
          '场景应用中心于2022年启动建设，总投资1.5亿元人民币，是区域首个专注于数字化转型场景应用的公共服务平台。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '中心建设分为三个阶段：一期工程（2022-2023年）完成了基础平台搭建和核心场景库建设；二期工程（2023-2024年）实现了场景展示和对接服务的数字化；三期工程（2024-2025年）将重点打造行业垂直场景和跨领域融合应用。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '目前，场景应用中心已整合了来自200多家企业和50多个科研机构的场景解决方案，服务用户超过800家，日均访问量超过5000次。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 30),
        const Text(
          '技术架构',
          style: TextStyle(
            color: Color(0xFF333333),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 20),
        _buildPlaceholderImage(500),
      ],
    );
  }

  Widget _buildPolicySection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '政策资讯',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '关于场景应用中心的相关政策和支持措施',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildPolicyItem(
          '《数字化转型场景应用促进办法》',
          '发布部门：市工信局 | 发布时间：2025年4月15日',
          '该办法提出了加强场景资源整合、推动技术应用落地、培育场景服务产业等5个方面的政策措施。',
        ),
        _buildPolicyItem(
          '《场景应用中心企业服务补贴方案》',
          '发布部门：市科技局 | 发布时间：2025年3月20日',
          '方案明确了企业使用场景应用中心服务的补贴标准和申请流程，最高可获50%的费用补贴。',
        ),
        _buildPolicyItem(
          '《数字化转型优秀场景评选办法》',
          '发布部门：市发改委 | 发布时间：2025年2月10日',
          '办法规范了数字化转型优秀场景的评选标准和流程，每年评选100个优秀应用场景给予奖励。',
        ),
      ],
    );
  }

  Widget _buildPolicyItem(String title, String info, String content) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border:
            Border(left: BorderSide(color: const Color(0xFF207CCA), width: 4)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            info,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            content,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '查看政策全文 →',
            style: TextStyle(
              color: Color(0xFF207CCA),
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildActivitySection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '活动报道',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '场景应用中心相关活动与新闻报道',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildNewsItem(
          '2025-06-18',
          '场景应用中心与10家行业龙头企业签署战略合作协议',
          '场景应用中心与本地10家行业龙头企业签署合作协议，共同推进数字化转型场景应用。',
        ),
        _buildNewsItem(
          '2025-05-12',
          '场景应用中心二期平台正式上线',
          '场景应用中心二期平台完成升级，新增虚拟现实展示和智能匹配功能，服务能力大幅提升。',
        ),
        _buildNewsItem(
          '2025-04-05',
          '场景应用中心荣获"最佳数字化转型平台"奖',
          '在2025中国数字经济大会上，场景应用中心荣获"最佳数字化转型平台"奖项。',
        ),
        _buildNewsItem(
          '2025-03-01',
          '场景应用中心场景数量突破500个',
          '场景应用中心汇聚的数字化转型场景数量突破500个，覆盖20多个行业领域。',
        ),
      ],
    );
  }

  Widget _buildNewsItem(String date, String title, String content) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      padding: const EdgeInsets.only(bottom: 20),
      decoration: const BoxDecoration(
        border: Border(
          bottom:
              BorderSide(color: Color(0xFFE0E9FF), style: BorderStyle.solid),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 100,
            child: Text(
              date,
              style: const TextStyle(
                color: Color(0xFF207CCA),
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 5),
                Text(
                  content,
                  style: const TextStyle(
                    color: Color(0xFF666666),
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildServiceSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '服务介绍',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '场景应用中心提供的各类服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildServiceItem(
          '场景展示服务',
          '提供数字化转型场景的数字化展示平台，通过图文、视频、虚拟现实等多种形式，全面展示各类场景应用案例。',
          '服务特点：多维度展示、交互式体验、案例库管理',
          '适用场景：技术应用展示、案例推广、经验分享等',
        ),
        _buildServiceItem(
          '需求对接服务',
          '连接技术供给方和应用需求方，提供精准的需求匹配和对接服务，促进技术应用落地。',
          '服务特点：智能匹配、专业对接、全程跟踪',
          '适用场景：技术供需对接、解决方案寻找、合作伙伴匹配等',
        ),
        _buildServiceItem(
          '方案验证服务',
          '提供数字化转型方案的验证环境和技术支持，帮助企业在实际应用前验证方案的可行性。',
          '服务特点：模拟环境、专家评估、优化建议',
          '适用场景：方案可行性验证、技术选型评估、实施风险控制等',
        ),
      ],
    );
  }

  Widget _buildServiceItem(
      String title, String desc1, String desc2, String desc3) {
    return Container(
      margin: const EdgeInsets.only(bottom: 30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Divider(height: 25, thickness: 1, color: Color(0xFFF0F0F0)),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildPlaceholderImage(200, width: 300),
              const SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      desc1,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      desc2,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      desc3,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildFooter() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 50),
      padding: const EdgeInsets.all(30),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1A2E),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _buildFooterLink('关于我们'),
              _buildFooterLink('服务条款'),
              _buildFooterLink('隐私政策'),
              _buildFooterLink('帮助中心'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台场景应用中心 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：scenario@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFooterLink(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }

  Widget _buildPlaceholderImage(double height,
      {double width = double.infinity}) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: const Center(
        child: Text(
          '图片占位',
          style: TextStyle(
            color: Colors.grey,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}
